<script setup lang="ts">
import type { TabItem } from "#ui/types";

defineOptions({
  name: "Index",
  layout: "default",
});

function someErrorLogger(error: unknown) {
  console.log("got an error: ", error);
  return { error };
}
// 这里默认为4张课程卡片
definePageMeta({
  middleware: ["goahead"],
});
const mainTab: TabItem[] = [
  {
    label: "All",
    icon: "i-vscode-icons:default-file",
  },
  {
    label: "Vue",
    icon: "i-vscode-icons:file-type-vue",
  },
  {
    label: "Python",
    icon: "vscode-icons:file-type-python",
  },
  {
    label: "Typescript",
    icon: "i-vscode-icons:file-type-typescript-official",
  },
  {
    label: "Java",
    icon: "i-vscode-icons:file-type-class",
  },
];
</script>

<template>
  <NuxtErrorBoundary @error="someErrorLogger">
    <!-- You use the default slot to render your content -->
    <ClientOnly>
      <UContainer
        :ui="{
          padding: tw`px-2 sm:px-2 lg:px-2`.join(' '),
        }"
      >
        <!-- 头图 -->
        <div class="max-h-[800px] min-h-[376px]">
          <Gcarousel />
        </div>
        <UDivider class="relative top-[-28px]" />
        <!-- 课程卡片 TODO:完全修改样式 -->
        <div class="the-nav-and-table">
          <div class="m-4 text-2xl mt-0 font-semibold">
            <UIcon name="i-carbon:skill-level-basic" />&nbsp;初级课程
          </div>
          <GclassNav :tab-init="mainTab" />
        </div>
        <!-- <div>
          TODO: 推荐列表/ 最新列表
        </div> -->
        <!-- <div class="flex flex-row basis-3/5 flex-shrink flex-wrap"> -->
        <!-- <Basement
            v-for="(item, index) in mainTabViewModel"
            :key="index"
            :label="item.label"
            :icon-name="item.icon!"
            :content="contents[index]"
          /> -->
        <!-- </div> -->
        <template #fallback>
          <FallBack />
        </template>
      </UContainer>
    </ClientOnly>
    <!-- OnError -->
    <template
      #error="{
        error,
        clearError,
      }: {
        error: unknown;
        clearError: VoidFunction;
      }"
    >
      You can display the error locally here: {{ error }}
      <button @click="clearError">
        This will clear the error.
      </button>
    </template>
  </NuxtErrorBoundary>
</template>

<style scoped lang="postcss">
.half-main {
  @apply w-[calc(50%-18px)];
}
</style>
